Ejs 安装与简介

2022-04-21
ejs javascript

Ejs，是一个纯 JavaScript所开发的一种高校式JavaScript模板引擎，其中“E”来代表可嵌入、高效、优雅、简单。可以帮助普通的JavaScript 代码来生成 HTML页面，EJS由于缓存和快速开发、用于调试以及语法简单和社区活跃备受开发者所喜爱。

安装

全局安装与浏览器支持安装

安装 EJS的方法分为两种，一种为通过使用 npm install ejs来安装，而另一种也可以通过ejs 仓库内的发行版来进行直接的引用，即全局安装和浏览器支持版本等。这里我们附上 EJS 仓库URL：https://github.com/mde/ejs，你可通过使用 https://github.com/mde/ejs/releases/tag/v3.1.6 来下载 EJS 3.1 版本。

全局安装

在一般的情况下，会使用npm install ejs来进行安装ejs，但本文中使用ejs-cli，即npm install ejs-cli，ejs与ejs-cli的区别就是 ejs-cli更加的简洁实在，没有 ejs那样的繁琐。通过使用ejs和ejs-cli的一段时间，将 .ejs 输出转换为 .html，ejs 基本上全部出错，而 ejs-cli则是一路绿灯，所以本文使用 ejs-cli 作为演示。

安装过程中的报错解决

package.json 没有的问题

如果在执行npm install ejs-cli的时候出现有类似与 package.json没有的问题，我们可以使用 npm init来执行生成package.json文件。

这个是会他会提示你进行配置，基本上我们可以直接全部使用回车键来进行跳过，也可以使用npm init -y来使用默认配置。

npm ERR! code ETIMEDOUT \ npm ERR! errno ETIMEDOUT

如果在安装中出现这种错误，我们可以使用npm install -g ejs-cli进行全局安装来解决此问题。

全局安装与本地安装的区别
在默认的情况下我们会使用本地安装，通过使用本地安装会在当前目录下生成一个 node_modules的目录，而全局安装则是将模块安装到全局，不会在项目的 node_modules目录下保存模块包。

输出

ejs-cli

当安装完成之后，我们可以通过使用 ejs-cli -h来查看ejs-cli的安装是否成功，如果没有成功可以查看npm是否安装失败来最后判断问题，当安装完成之后，我们可以在本地新建项目，且建立 index.ejs 文件，并写入（在此之前先建立一个/ejs目录用于存储ejs转换html后的文件）：

<% title="Hello,world" %>

<h1>
    Title: <%= title %>
</h1>

最后我们可以通过使用 ejs-cli -f index.ejs -o ejs/来在 /ejs 目录下生成 index.html文件文件。

浏览器支持

除了通过使用 ejs-cli 的方式来将 .ejs文件转换成 .html的方式，处于这种方式开发团队表示很繁琐，所以推出了另一种通过直接引入就可以写 ejs 语法的js扩展，再次我们需要新建一个index.html文件并写入：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    <p id="title"></p>
    <script src="js/ejs.js"></script>
    <script>
        var html = ejs.render('<%="Hello,world!" %>','');
        document.getElementById('title').innerHTML = html;
    </script>        
</body>
</html>

⬅️ Go back